<template>
  <div class="tasksItem-container">
    <v-expansion-panels
      v-model="syncedSelectedPanel"
      flat
      accordion
      focusable
      class="panels"
    >
      <v-expansion-panel
        v-for="task in propTaskList"
        :key="task.id"
        class="panel"
      >
        <v-expansion-panel-header hide-actions class="panel-header">
          <v-list subheader class="panel-subheader">
            <v-list-item>
              <v-list-item-avatar>
                <v-img
                  class="rounded-pill"
                  src="https://cdn.vuetifyjs.com/images/lists/2.jpg"
                ></v-img>
              </v-list-item-avatar>

              <v-list-item-content>
                <v-list-item-title>{{ task.taskNumber }}</v-list-item-title>

                <v-list-item-subtitle>{{ task.taskName }}</v-list-item-subtitle>
              </v-list-item-content>

              <v-list-item-action>
                <v-list-item-subtitle>
                  <span>{{ task.startDate }}</span> -
                  <span>{{ task.endDate }}</span>
                </v-list-item-subtitle>
                <div class="actions-group">
                  <div class="actions-group-icon">
                    <v-btn icon small>
                      <v-icon small color="grey">mdi-file</v-icon>
                    </v-btn>
                    <v-chip
                      class="mx-1 mr-3"
                      :color="getStatusColor(task.status)"
                      label
                      dark
                      x-small
                    >
                      {{ task.status }}
                    </v-chip>
                    <div class="status">
                      <v-icon
                        x-small
                        class="arrow-icon"
                        :color="getPriorityColor(task.priority)"
                      >
                        {{
                          task.priority === "Low"
                            ? "mdi-arrow-down"
                            : "mdi-arrow-up"
                        }}
                      </v-icon>
                      <v-list-item-action-text>
                        {{ task.priority }}
                      </v-list-item-action-text>
                    </div>
                  </div>
                  <v-list-item-action-text class="actions-group-text"
                    ><b>{{ task.activitiesSum }}</b
                    >Activities</v-list-item-action-text
                  >
                </div>
              </v-list-item-action>
            </v-list-item>
          </v-list>
        </v-expansion-panel-header>
        <v-expansion-panel-content class="panel-content">
          <v-expansion-panels
            flat
            accordion
            focusable
            multiple
            v-model="subPanel"
            class="sub-panels"
          >
            <v-expansion-panel class="sub-panel">
              <v-expansion-panel-header class="sub-panel-header">
                <template v-slot:default>
                  <div class="d-flex justify-space-between align-center">
                    <span> Info </span>
                    <div>
                      <v-btn icon small>
                        <v-icon small> mdi-square-edit-outline </v-icon>
                      </v-btn>
                    </div>
                  </div>
                </template>
              </v-expansion-panel-header>
              <!-- <TasksItemInfo /> -->
              <v-expansion-panel-content class="pa-4">
                {{ task.info }}
              </v-expansion-panel-content>
            </v-expansion-panel>
            <v-expansion-panel class="sub-panel">
              <v-expansion-panel-header class="sub-panel-header">
                Report Problem
              </v-expansion-panel-header>
              <v-expansion-panel-content>
                <TasksItemReportProblem :items="task.reportProblemList" />
              </v-expansion-panel-content>
            </v-expansion-panel>
            <v-expansion-panel class="sub-panel">
              <v-expansion-panel-header class="sub-panel-header">
                Activity Log
              </v-expansion-panel-header>
              <v-expansion-panel-content>
                <TasksItemActivityLog :items="task.activityLog" />
              </v-expansion-panel-content>
            </v-expansion-panel>
            <v-expansion-panel class="sub-panel">
              <v-expansion-panel-header class="sub-panel-header">
                <template v-slot:default>
                  <div class="d-flex justify-space-between align-center">
                    <span> Attachment </span>
                    <div>
                      <v-btn @click.stop="showUploadDialog" icon small>
                        <v-icon small> mdi-file-upload </v-icon>
                      </v-btn>
                    </div>
                  </div>
                </template>
              </v-expansion-panel-header>
              <v-expansion-panel-content>
                <JobsItemAttachment
                  class="px-2 pt-1 pb-2"
                  :attachmentList="task.attachmentList"
                />
              </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
    <Upload
      v-if="selectedTask"
      :attachmentList="selectedTask.attachmentList"
      :show.sync="showUpload"
    ></Upload>
  </div>
</template>

<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
import TasksItemInfo from "@/components/Project/Tasks/TasksItemInfo.vue";
import TasksItemReportProblem from "@/components/Project/Tasks/TasksItemReportProblem.vue";
import TasksItemActivityLog from "@/components/Project/Tasks/TasksItemActivityLog.vue";
import JobsItemAttachment from "@/components/Project/Jobs/JobsItemAttachment.vue";
import Upload from "@/components/Project/Upload/Upload.vue";

import { ITaskItem } from "@/components/Project/index";
@Component({
  components: {
    TasksItemInfo,
    TasksItemReportProblem,
    TasksItemActivityLog,
    JobsItemAttachment,
    Upload,
  },
  props: {
    taskList: {
      type: Array,
      default: () => [],
    },
  },
})
export default class TasksItem extends Vue {
  @PropSync("selectedPanel", { type: Number })
  syncedSelectedPanel!: number | null;
  get propTaskList(): ITaskItem[] {
    return this.$props.taskList;
  }

  getPriorityColor(priority: string) {
    switch (priority) {
      case "High":
        return "#F31616";
      case "Low":
        return "#67D245";
      case "Middle":
        return "#EB9B31";
      default:
        return "#F31616";
    }
  }

  getStatusColor(status: string) {
    switch (status) {
      case "Ongoing":
        return "#EB9B31";
      case "New Job":
        return "#556282";
      case "Finished":
        return "#7FAB78";
      default:
        return "#EB9B31";
    }
  }

  subPanel = [0, 1, 2, 3];

  get selectedTask() {
    return this.$store.state.ProjectsStore.selectedTask;
  }

  // selectedPanelValue: number | null = null;
  // get selectedPanel() {
  //   if (this.selectedTask) {
  //     return this.propTaskList.findIndex(
  //       (item) => item.id === this.selectedTask.id
  //     );
  //   } else {
  //     return this.selectedPanelValue;
  //   }
  // }

  // set selectedPanel(val: number | null) {
  //   this.selectedPanelValue = val;
  // }

  // @Watch("selectedPanelValue")
  // changeSelectedPanelValue(val: number | undefined) {
  //   if (typeof val !== "number") {
  //     this.$store.commit("ProjectsStore/setSelectedTask", null);
  //     return;
  //   }
  //   const selectedTask = this.propTaskList[val];
  //   this.$store.commit("ProjectsStore/setSelectedTask", selectedTask);
  // }

  showUpload = false;
  showUploadDialog() {
    this.showUpload = true;
  }
}
</script>

<style lang="scss">
@import "@/components/Project/Tasks/TasksItem.scss";
</style>
